<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在浏览器中测试WebAssembly</title>
</head>
<body>
<script>
    /**
     * 知识补充
     *
     * Fetch是一个用来获取网络资源的方便现代的API。
     * 任何使用XMLHttpRequest的地方，都可以使用Fetch
     * 服务器上有一个叫做optimized.wasm的WebAssembly模块
     * fetch权威说明:
     *     https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API
     *     https://developer.mozilla.org/zh-CN/docs/WebAssembly/Loading_and_running
     * @type {Response}
     */
    // 使用异步自执行函数
    (async () => {
        // 使用fetch()全局函数来轻松地获取它，该函数返回一个可以解析为Response对象的promise。
        let response = await fetch('../build/optimized.wasm');
        // 使用arrayBuffer()函数把响应（response）转换为带类型数组，该函数返回一个可以解析为带类型数组的promise。
        let bytes = await response.arrayBuffer();
        // 最后，使用WebAssembly.instantiate()函数一步实现编译和实例化带类型数组。
        let results = await WebAssembly.instantiate(bytes, {});

        // 拿到WebAssembly对象模型
        let wasmModule = results.instance.exports;
        // 执行WebAssembly中的自定义函数，并将结果显示到 Dom中
        document.body.innerHTML = wasmModule.add(1, 2);
    })()
</script>
</body>
</html>
